[#assign title]绑定手机号码[/#assign]
[#include "/common/_layout.html"/]
[#macro style]
<style></style>
[/#macro]
[#macro body]
<form>
    <div class="form-row">
        <div class="form-group col-12">
            <input type="text" class="form-control form-control-lg" v-model="formData.mobile" placeholder="请输入手机号码" maxlength="11"/>
        </div>
    </div>
    <div class="form-row">
        <div class="form-group col-12">
            <input type="password" class="form-control form-control-lg" v-model="formData.password" placeholder="请设置密码" maxlength="18"/>
        </div>
    </div>
    <div class="form-row">
        <div class="form-group col-12">
            <input type="password" class="form-control form-control-lg" v-model="formData.confirmPassword" placeholder="请确认密码"
                   maxlength="18"/>
        </div>
    </div>
    <div class="form-row">
        <div class="form-group input-group col-12">
            <input type="text" class="form-control form-control-lg" v-model="formData.authCode" placeholder="验证码" maxlength="6"/>
            <div class="input-group-append">
                <button type="button" class="btn btn-lg btn-primary"
                        :disabled="authCodeButtonDisabled"
                        @click="sendAuthCode">
                    {{authCodeButtonText}}
                </button>
            </div>
        </div>
    </div>
    <div class="form-row">
        <div class="form-group col-12">
            <button type="button" class="btn btn-lg btn-primary btn-block" @click="bind">绑定手机号码</button>
            <small class="form-text text-muted">
                绑定手机号码并设置密码后,可以使用手机号码和密码登录
            </small>
        </div>
    </div>
</form>
[/#macro]
[#macro script]
<script>
    window.authCodeCountdown = 60;
    var app = new Vue({
        el: '#app',
        data: {
            formData: {
                mobile: '',
                password: '',
                confirmPassword: '',
                authCode: ''
            },
            authCodeCountdown: window.authCodeCountdown
        },
        methods: {
            changeTime: function () {
                var vm = this;
                if (vm.authCodeCountdown == 1) {
                    vm.authCodeCountdown = window.authCodeCountdown;
                    return;
                } else {
                    vm.authCodeCountdown--;
                }
                setTimeout(vm.changeTime, 1000);
            },
            sendAuthCode: function () {
                var vm = this;
                vm.$indicator.open({
                    text: '处理中...',
                    spinnerType: 'fading-circle'
                });
                axios.post('/customer/mobile/sendAuthCode', vm.paramsSerializer(vm.formData)).then(function (res) {
                    vm.$indicator.close();
                    var data = res.data;
                    if (data.success) {
                        vm.changeTime();
                        vm.$toast('验证码获取成功,请留意手机短信');
                        return;
                    }

                    vm.$toast(data.message || '验证码获取失败,请稍候重试');
                }).catch(function (err) {
                    vm.$indicator.close();
                });
            },
            bind: function () {
                var vm = this;
                var password = vm.formData.password;
                if (!password) {
                    return vm.$toast('请设置密码');
                }
                if (password.length < 6 || password.length > 18) {
                    return vm.$toast('密码需6-18位');
                }
                if (password != vm.formData.confirmPassword) {
                    return vm.$toast('两次输入的密码不一致');
                }
                vm.$indicator.open({
                    text: '处理中...',
                    spinnerType: 'fading-circle'
                });
                axios.post('/customer/mobile/bind', vm.paramsSerializer(vm.formData)).then(function (res) {
                    vm.$indicator.close();
                    var data = res.data;
                    if (data.success) {
                        vm.$toast('绑定成功,您可以使用绑定的手机号登录');
                        var skip = function () {
                            window.location.href = '/customer/index';
                        };
                        setTimeout(skip, 3000);
                        return;
                    }

                    vm.$toast(data.message || '绑定失败,请稍候重试');
                }).catch(function (err) {
                    vm.$indicator.close();
                });
            }
        },
        computed: {
            authCodeButtonText: function () {
                var vm = this;
                if (vm.authCodeCountdown == window.authCodeCountdown) {
                    return '获取验证码';
                } else {
                    return '重新发送(' + vm.authCodeCountdown + ')';
                }
            },
            authCodeButtonDisabled: function () {
                return this.authCodeCountdown != window.authCodeCountdown;
            }
        },
        mounted: function () {
        }
    });
</script>
[/#macro]